<template>
	<view>
		<cu-custom bgImage="https://zhhq.lzfsd.com/images/zhty/bg1.jpg" :isBack="true">
			<block slot="backText" style="font-weight: bold;">返回</block>
			<block slot="content">
				<image src="/static/images/finis.png" mode="aspectFill" style="width: 240upx;height: 60upx;"></image>
			</block>
		</cu-custom>
		<view>
			<map :style="mapStyle" :latitude="latitude" :longitude="longitude" :polyline="polyies"></map>
		</view>
		
		
		<view class="cu-card dynamic">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" :style="headStyle"></view>
						<view class="content flex-sub">
							<view style="font-weight:bold;color:#584e66;">{{user.nickName}}</view>
							<view class="text-gray text-sm flex justify-between" style="font-weight:bold;color:#584e66;">
								{{detailDate.sportTime}}
							</view>
						</view>
						<view style="margin-right:20px;">
							<text style="color:#584e66;font-weight:bold;font-size:30px;">{{detailDate.totalDistance}}公里</text>
						</view>
					</view>
				</view>
				<view class="text-content">
					
					<view style="width:100%;">
						<view style="width:25%;display:inline-block;text-align:center;">
							<text style="color:#584e66;font-size:40rpx;font-weight:bold;">{{detailDate.speed}}</text>
						</view>
						<view style="width:50%;display:inline-block;text-align:center;">
							<text style="color:#584e66;font-size:40rpx;font-weight:bold;">
								{{detailDate.time.hour}}:{{detailDate.time.minute}}:{{detailDate.time.second}}
							</text>
						</view>
						<view style="width:25%;display:inline-block;text-align:center;">
							<text style="color:#584e66;font-size:40rpx;font-weight:bold;">{{detailDate.calorie}}</text>
						</view>
					</view>
					
					<view style="width:100%;">
						<view style="width:25%;display:inline-block;text-align:center;">
							<text style="color:#ADACAA;font-size:25rpx;font-weight:bold;">速度</text>
						</view>
						<view style="width:50%;display:inline-block;text-align:center;">
							<text style="color:#ADACAA;font-size:25rpx;font-weight:bold;">用时</text>
						</view>
						<view style="width:25%;display:inline-block;text-align:center;">
							<text style="color:#ADACAA;font-size:25rpx;font-weight:bold;">千卡</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailDate: null,
				latitude: 39.909,
				longitude: 116.39742,
				mapStyle: '',
				headStyle: '',
				user: null,
				polyies: [{
					points: [],
					color: "#0000AA",
					width: 5
				}]
			}
		},
		onShow() {
			
		},
		onLoad(event) {
			this.initView();
			this.detailDate = JSON.parse(decodeURIComponent(event.detailDate));
			if(this.detailDate.points != null && this.detailDate.points.length > 0){
				this.polyies[0].points = this.detailDate.points;
				this.latitude = this.detailDate.points[0].latitude;
				this.longitude = this.detailDate.points[0].longitude;
			}else{
				this.getNowLocation();
			}
		},
		methods: {
			initView:function(){
				var me = this;
				me.user = uni.getStorageSync('user');
				if(me.user != null){
					me.headStyle = "background-image:url("+ me.user.avatarUrl +");";
				}else{
					me.headStyle = "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);";
				}
				uni.getSystemInfo({
					success: function (res) {
						var winHeight = res.windowHeight - 240;
						me.mapStyle = "width:100%; height:"+ winHeight +"px;";
					}
				});
			},
			
			/**
			 * 定位当前位置
			 */
			getNowLocation:function(){
				var me = this;
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						me.latitude = res.latitude;
						me.longitude = res.longitude;
					}
				});
			}
		}
	}
</script>

<style>
</style>
